<template>
	<div style="verflow-x: hidden;width: 100%;" v-loading="loading">
		<div style="padding: 10px;border-radius: 8px;background: #fff;margin-bottom: 10px;justify-content: center;"
			class="displayFlex">
			<div class="date-item1 displayFlex" style="margin-left: 20px;">
				<el-date-picker v-model="params.year" type="year" placeholder="选择年" format="yyyy"
					style="border-radius: 40px;width: 60px;text-align: center;" :clearable="false" value-format="yyyy"
					@change="getData()">
				</el-date-picker>
				<i class="el-icon-arrow-down" style="margin-bottom: 0px;color: #999;"></i>
			</div>
		</div>

		<div style="display: flex;">
			<div style="flex:1;background:#472FDF;color: #fff;position: relative;border-radius: 24px;padding: 28px 25px;"
				class="mr10" v-if="dataList3">

				<div style="max-height: 500px;overflow-y: auto;">
					<div v-for="(item,index) in dataList3.productList" :key="index" class="mb15">
						<div class="displayFlex" style="margin-bottom: 60px;">
							<span style="background: #F9E429;height:20px;width: 3px;border-radius: 2px;"
								class="mr10"></span>
							<span class="font20">{{item.productName}}</span>
						</div>

						<div class="ml10" style="display:flex">
							<img src="../assets/sIcon162.png" style="width: 66px;height: 76px;" />
							<div class="ml10">
								<div style="color: #fff;" class="font16 mb5">CO2</div>
								<div class="font20">{{item.cQty}}Kg</div>
							</div>
						</div>
					</div>
				</div>

				<img src="../assets/sIcon163.png"
					style="position: absolute;top: 26.5%;right: -5px;width: 6px;height: 11px;" />
			</div>

			<div style="flex:5;background: #E8EAEF;display: flex;justify-content: space-between;" class="pad15 bra8">
				<div style="flex: 3;" class="mr15">
					<div style="background: #fff;width: 100%;" class="pad24 bra8 mb15">
						<div style="color: #222;" class="mb10 font15">
							<span>原辅材料</span>
							<span class="font13">（{{dataList3.materialList.length}}）</span>
						</div>
						<div class="displayFlexBet">
							<div id="chart2" style="height: 400px;width: 100%;"></div>
							<!-- <div style="overflow-y: auto;display:flex;flex-wrap: wrap;height: 280px;width: 50%;">
								<div class="mb10 w100" v-for="(item,index) in dataList3.materialList" :key="index"
									style="display: flex;justify-content: space-between;">
									<div style="flex:1;text-align: left;">
										<span :style="{'color':colorList1[index]}"
											style="margin-right: 3px;">0{{index+1}}.</span>
										<span>{{item.materialName}}</span>
									</div>
									<div style="text-align: right;">
										<div class="mb5">用量{{item.qty}}{{item.unitValue}}</div>
										<div class="color888 font12">单位用量{{item.unitQty}}{{item.unitValue}}</div>
									</div>

								</div>

								<div v-if="dataList3.materialList.length == 0" class="pad20 textCenter w100"
									style="color: #999;">
									暂无原辅料
								</div>
							</div> -->
						</div>
					</div>

					<div style="width: 100%;" class="pad24 bra8 bgfff">

						<div style="color: #222;" class="mb24 font15">碳排放趋势</div>
						<div id="cahrt1" style="width:100%;height:180px"></div>
					</div>
				</div>

			</div>
		</div>

	</div>
</template>

<script>
	import * as echarts from 'echarts';
	import moment from 'moment'

	let that
	export default {
		components: {

		},
		data() {
			return {
				params: {
					year: moment().format('YYYY'),
					month: moment().format('MM'),
					equipmentId: '',
				},
				params2: {
					year: moment().format('YYYY'),
					month: moment().format('MM'),
					day: "01",
					equipmentId: '',
				},
				recordDet: {},
				chooseProduct: {},
				loading: false,
				dialogVisible: false,
				dialogVisible2: false,
				productionList: [],
				dayList: [],
				monthDate: "",
				dataList1: [],
				dataList2: [],
				lastDay: 0,
				selectDay: "01",
				dataList3: {},
				dataList4: {},
				dataList5: [],
				dataList6: [],
				dataList7: [],
				dataList8: [],
				selectPrams: {},
				colorList1: ['#6204F1', '#D91749', '#FFDD00', '#DDDDE4'],
				colorList2: ['#CC0236', '#FF5400', '#FFA200', '#DDDDE4'],
				colorList3: ['#008B4B', '#21D026', '#04E38A', '#DDDDE4']
			}
		},
		created: function() {},
		mounted: function() {
			that = this
			that.params.ticketId = that.$store.state.token
			that.pageProductionEquipmentBase()
			that.countProStdBookStatistics()

			setTimeout(function() {
				var chartDom = document.getElementById('cahrt1');
				var myChart = echarts.init(chartDom);
				var option;

				option = {
					xAxis: {
						type: 'category',
						boundaryGap: false,
						data: ['第一季度', '第二季度', '第三季度', '第四季度']
					},
					grid: {
						top: '3%',
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},
					yAxis: {
						type: 'value'
					},
					series: [{
						data: [820, 932, 901, 934],
						type: 'line',
						areaStyle: {}
					}]
				};

				option && myChart.setOption(option);
			}, 1000)
		},

		methods: {

			getData() {
				that.getProductionEquipmentDateStandingBookList()
				that.countProStdBookStatistics()
				that.countProStdBook()
				that.countEquipRunTime()

				that.getEquipParameterList()
				that.listGasDefenceNormalPercent()
				that.listWaterDefenceNormalPercent()
			},

			listWaterDefenceNormalPercent() {
				that.ajax({
					url: '/productionEquipment/stdBook/listWaterDefenceNormalPercent',
					data: JSON.stringify({
						equipmentId: that.params.equipmentId,
						recordDate: that.params2.year + "-" + that.params2.month + "-" + that.params2.day
					}),
					contentType: 'application/json',
					success: function(result) {
						for (let item of result.data) {
							item.bg = "#F4F7FA"
							item.color = '#888888'
							item.borderColor = "#888888"
						}
						that.dataList8 = result.data
					},
				})
			},

			listGasDefenceNormalPercent() {
				that.ajax({
					url: '/productionEquipment/stdBook/listGasDefenceNormalPercent',
					data: JSON.stringify({
						equipmentId: that.params.equipmentId,
						recordDate: that.params2.year + "-" + that.params2.month + "-" + that.params2.day
					}),
					contentType: 'application/json',
					success: function(result) {
						for (let item of result.data) {
							item.bg = "#F5F5FB"
							item.color = '#555'
							item.borderColor = "#888888"
						}
						that.dataList7 = result.data
					},
				})
			},

			getEquipParameterList() {
				that.ajax({
					url: '/productionEquipment/stdBook/getEquipParameterList',
					data: JSON.stringify({
						equipmentId: that.params.equipmentId,
						recordDate: that.params2.year + "-" + that.params2.month + "-" + that.params2.day
					}),
					contentType: 'application/json',
					success: function(result) {
						for (let item of result.data) {
							item.bg = "#F4F7FA"
							item.color = '#888888'
							item.borderColor = "#888888"
						}

						that.dataList6 = result.data
					},
				})
			},

			countEquipRunTime() {
				that.ajax({
					url: '/productionEquipment/stdBook/countEquipRunTime',
					data: JSON.stringify({
						equipmentId: that.params.equipmentId,
						recordDate: that.params2.year + "-" + that.params2.month + "-" + that.params2.day
					}),
					contentType: 'application/json',
					success: function(result) {

						for (let index in result.data) {
							let item = result.data[index]
							if (index == 0) {
								item.bg = "#5054C2"
								item.color = "#fff"
							} else if (index == 1 || index == 2) {
								item.bg = "#E4FFE9"
								item.color = "#444"
							} else {
								item.bg = "#FEE588"
								item.color = "#444"
							}
						}

						that.dataList5 = result.data
					},
				})
			},

			countProStdBook() {
				that.ajax({
					url: '/productionEquipment/stdBook/countProStdBook',
					data: JSON.stringify({
						equipmentId: that.params.equipmentId,
						recordDate: that.params2.year + "-" + that.params2.month + "-" + that.params2.day
					}),
					contentType: 'application/json',
					success: function(result) {
						that.dataList4 = result.data
					},
				})
			},

			countProStdBookStatistics() {
				that.ajax({
					url: '/productionEquipment/stdBook/countProStdBookStatistics',
					data: JSON.stringify({
						equipmentId: that.params.equipmentId,
						recordDate: that.params2.year + "-" + that.params2.month + "-" + that.params2.day
					}),
					contentType: 'application/json',
					success: function(result) {
						that.dataList3 = result.data
						for (let item of that.dataList3.materialList) {
							item.name = item.materialName
							item.value = Number(item.qty)
						}

						for (let item of that.dataList3.hw) {
							item.name = item.wasteName
							item.value = Number(item.amount)
						}

						for (let item of that.dataList3.sw) {
							item.name = item.wasteName
							item.value = Number(item.amount)
						}
						that.$nextTick(function() {
							that.formPieChart("pieChart1", that.dataList3.materialList, true, that
								.colorList1)
							that.formPieChart("pieChart2", that.dataList3.hw, false, that.colorList2)
							that.formPieChart("pieChart3", that.dataList3.sw, false, that.colorList3)
						})

					},
				})
			},

			formLineChart(day) {
				if (day) {
					if (day < 9) day = '0' + day
					else day = '' + day

					that.params2.day = day
				}
				that.lastDay = new Date(that.params.year, that.params.month, 0).getDate();
				that.ajax({
					url: '/productionEquipment/countDayRunHours',
					data: JSON.stringify({
						equipmentId: that.params.equipmentId,
						recordDate: that.params2.year + "-" + that.params2.month + "-" + that.params2.day
					}),
					contentType: 'application/json',
					success: function(result) {
						let dataList = result.data
						var chartDom = document.getElementById('chart3');
						var myChart = echarts.init(chartDom);
						var option;
						let seriesData = []
						let legendData = []

						for (let item of dataList) {
							legendData.push({
								'name': item.installationName
							})
							let seriesItem = {
								type: 'line',
								name: item.installationName,
								data: []
							}
							for (let item2 of item.dateList) {
								seriesItem.data.push([item2.date, item2.num])
							}
							seriesData.push(seriesItem)
						}

						option = {
							legend: {
								show: true,
								data: legendData
							},
							tooltip: {
								trigger: 'axis'
							},
							xAxis: {
								type: 'time',
							},
							yAxis: {
								type: 'value',
								axisLabel: {
									show: false,
									textStyle: {
										color: '#D7D7D7', //文字颜色
									},
								},
							},
							series: seriesData
						};

						option && myChart.setOption(option);
					},
				})
			},

			formBarChart() {

				setTimeout(function() {
					that.ajax({
						url: '/productionEquipment/countMonthRunHours',
						data: JSON.stringify({
							equipmentId: that.params.equipmentId,
							recordDate: that.params2.year + "-" + that.params2.month + "-01"
						}),
						contentType: 'application/json',
						success: function(result) {
							let dataList = result.data
							let dimensions = ['product']
							let source = []
							let series = []
							let legendData = []
							let lastDay = new Date(that.params2.year, that.params2.month, 0).getDate();

							var chartDom = document.getElementById('chart2');
							var myChart = echarts.init(chartDom);
							var option = {
								// title: {
								// 	text: 'World Population'
								// },
								tooltip: {
									trigger: 'axis',
									axisPointer: {
										type: 'shadow'
									}
								},
								legend: {
									show: false
								},
								grid: {
									top: '3%',
									left: '3%',
									right: '4%',
									bottom: '3%',
									containLabel: true
								},
								xAxis: {
									type: 'value',
									boundaryGap: [0, 0.01]
								},
								yAxis: {
									type: 'category',
									data: ['直接排放', '某原料', '某某某原料文字右对齐', '废气排放', '固危废处置']
								},
								series: [{
									name: '2011',
									type: 'bar',
									data: [{
											value: 100,
											itemStyle: {
												color: '#09D174'
											}
										},
										{
											value: 200,
											itemStyle: {
												color: '#1875F0'
											}
										},
										{
											value: 300,
											itemStyle: {
												color: '#9657E9'
											}
										}, {
											value: 300,
											itemStyle: {
												color: '#FFC618'
											}
										}, {
											value: 300,
											itemStyle: {
												color: '#FF5D76'
											}
										},
									]
								}]
							};

							option && myChart.setOption(option, true);
						},
					})
				}, 1000)
			},

			formPieChart(chartId, seriesData, isBig, colorList) {
				//console.log(seriesData)
				var chartDom = document.getElementById(chartId);
				var myChart = echarts.init(chartDom);
				var option;

				option = {
					grid: {
						right: "5%",
					},
					tooltip: {
						trigger: 'item',
						formatter: '{b} : {c} ({d}%)'
					},
					color: colorList,
					series: [{
						//name: '去向',
						type: 'pie',
						radius: isBig ? [30, 80] : [30, 50],
						center: ['50%', '50%'],
						roseType: 'radius',
						data: seriesData,
						label: {
							normal: {
								show: false
							},
						},
						labelLine: {
							normal: {
								show: false
							}
						},
						emphasis: {
							itemStyle: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: 'rgba(0, 0, 0, 0.5)'
							}
						}
					}]
				};

				option && myChart.setOption(option);
			},

			countTotalRunHours() {
				that.ajax({
					url: '/productionEquipment/countTotalRunHours',
					data: JSON.stringify({
						equipmentId: that.params.equipmentId,
						recordDate: that.params2.year + "-" + that.params2.month + "-01"
					}),
					contentType: 'application/json',
					success: function(result) {
						let taotal = 0
						for (let item of result.data) {
							taotal += Number(item.runHour)
						}
						for (let item of result.data) {
							item.percent = (item.runHour / taotal) * 100
						}
						//console.log(result.data, taotal)
						that.dataList1 = result.data
						that.formBarChart()
						//that.formLineChart()
					},
				})
			},

			saveStandingBook() {
				for (let item of that.recordDet.runtimeList) {
					if (item.runtimeList && item.runtimeList.length > 0) {
						for (let item2 of item.runtimeList) {
							item2.startTime = that.params.year + "-" + that.params.month + "-" + that.selectDay + " " +
								item2.startTime
							item2.endTime = that.params.year + "-" + that.params.month + "-" + that.selectDay + " " + item2
								.endTime
						}
					}
				}
				if (!that.recordDet.workStatus) return that.$message.error("状态必填")
				//console.log(that.recordDet.runtimeList)
				that.$confirm('是否确认保存?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					that.ajax({
						url: '/productionEquipment/saveStandingBook',
						contentType: 'application/json',
						data: JSON.stringify(that.recordDet),
						success: function(result) {
							that.$message.success("保存成功！")
							that.dialogVisible = false
							that.recordDet = {}
							that.pageProductionEquipmentBase()
						},
					})
				})
			},

			saveProduct() {
				if (!that.chooseProduct.qty && that.recordDet.workStatus != 'NOT_PRODUCE') return that.$message.error(
					"请输入产品的产量")
				that.chooseProduct.isSelect = true
				that.dialogVisible2 = false
			},

			chooseThisProduct(item) {
				that.chooseProduct = item
				that.dialogVisible2 = true
			},

			recordOrder(item) {
				//console.log(item)
				that.selectDay = item.dateStr.split("日")[0]
				that.ajax({
					url: '/productionEquipment/getStandingBookByDate',
					contentType: 'application/json',
					data: JSON.stringify({
						equipmentId: that.params.equipmentId, // 设施id
						recordDate: item.fullDateStr
					}),
					success: function(result) {
						if (result.data.runtimeList && result.data.runtimeList.length > 0) {
							for (let item of result.data.runtimeList) {
								for (let item2 of item.runtimeList) {
									if (item2.startTime && item2.startTime.split(" ").length > 1) item2
										.startTime = item2.startTime.split(" ")[1]
									if (item2.endTime && item2.endTime.split(" ").length > 1) item2.endTime =
										item2.endTime.split(" ")[1]
								}
							}
						}
						//console.log(result.data)
						that.recordDet = result.data
						that.dialogVisible = true
					},
				})
			},

			gotoDet() {
				that.$router.push("/produceManage/orderDet?ticketId=" + that.params.ticketId + "&monthDate=" + that.params
					.year +
					"-" + that.params.month + "&equipmentId=" + that.params.equipmentId)
			},

			remoteMethod(query) {

			},

			//月度统计
			countProductionEquipmentProductStandingBook() {
				that.ajax({
					url: '/productionEquipment/countProductionEquipmentProductStandingBook?ticketId=' +
						that.params.ticketId,
					contentType: 'application/json',
					data: JSON.stringify({
						equipmentId: that.params.equipmentId, // 设施id
						monthDate: that.params.year + "-" + that.params.month + "-01" // 月度时间
					}),
					success: function(result) {
						that.monthDate = result.data
					},
				})
			},

			getProductionEquipmentDateStandingBookList() {
				that.loading = true
				that.ajax({
					url: '/productionEquipment/getProductionEquipmentDateStandingBookList?ticketId=' +
						that.params.ticketId,
					contentType: 'application/json',
					data: JSON.stringify({
						equipmentId: that.params.equipmentId, // 设施id
						monthDate: that.params.year + "-" + that.params.month + "-01" // 月度时间
					}),
					success: function(result) {

						for (let item of result.data) {
							if (item.workStatus && item.workStatus != 'NOT_PRODUCE') {
								item.bg = '#CCDDEF'
							} else {
								//item.bg = '#fff'
								item.bg = "#F2F2F2 "
							}
						}
						that.dayList = result.data

						that.countProductionEquipmentProductStandingBook()
						that.countTotalRunHours()
						that.loading = false
					},
				})
			},

			pageProductionEquipmentBase() {
				that.loading = true
				that.ajax({
					url: '/productionEquipment/pageProductionEquipmentBase?pageIndex=1' +
						'&pageSize=50&ticketId=' + that.params.ticketId,
					data: JSON.stringify({
						ticketId: that.params.ticketId,
					}),
					contentType: 'application/json',
					success: function(result) {
						if (result.data) {
							that.productionList = result.data.records
							if (that.productionList.length > 0 && !that.params.equipmentId) that.params
								.equipmentId = that.productionList[0].id
							that.getData()

						}
					},
				})
			},
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.date-item1>>>.el-input__prefix,
	.date-item1>>>.el-input__suffix {
		display: none !important;
	}

	.date-item1>>>.el-input__inner {
		height: 20px !important;
		padding: 0 0px 0px !important;
		font-family: Source Han Sans CN !important;
		font-weight: 400 !important;
		border-bottom: unset;
		border-top: 0 !important;
		border-left: 0 !important;
		border-right: 0 !important;
		background: none !important;
		border-radius: 0 !important;
		text-align: center;
		font-size: 15px !important;
		color: #333 !important;
	}


	.date-item2>>>.el-input__prefix,
	.date-item2>>>.el-input__suffix {
		display: none !important;
	}

	.date-item2>>>.el-input__inner {
		height: 20px !important;
		padding: 0 0px 0px !important;
		font-family: Source Han Sans CN !important;
		font-weight: 400 !important;
		border-bottom: unset;
		border-top: 0 !important;
		border-left: 0 !important;
		border-right: 0 !important;
		background: none !important;
		border-radius: 0 !important;
		text-align: center;
		font-size: 15px !important;
		color: #3A3EF4 !important;
	}

	.el-col-20 {
		height: 60px;
		line-height: 60px;
		overflow-y: scroll;
	}

	.listItem {
		.listItem2 {
			padding: 10px 8px;
			color: #472FDF;
			width: 66px;
		}

		.color2 {
			color: #F9E429;
		}
	}

	.listItem:hover {
		.listItem2 {
			padding: 10px 8px;
			background: #A397EF !important;
			width: 66px;
		}

		.color2 {
			color: #A397EF !important;
		}

		.color3 {
			color: #A397EF !important;
		}
	}



	.listItem3 {
		color: #F9E429;
	}

	.listItem3:hover {
		color: #A397EF !important;
	}

	.listItem4:hover {
		color: #A397EF !important;
	}

	.chaxunButton {
		background: linear-gradient(to right, #488cf1, #3b45f4);
		padding: 6px 30px;
		color: #fff;
		margin-left: 20px;
		border-radius: 40px;
		cursor: pointer;
	}

	.defenceSelectClass {
		color: #3a3ef4 !important;
		font-weight: bold;
	}


	.u-flex-1 {
		flex: 1;
	}

	.monthItem {
		color: #777777;
		cursor: pointer;
	}

	.itemSelected {
		border-radius: 50%;
		background: #3A3EF4;
		color: #fff !important;
	}

	.dot1 {
		width: 10px;
		height: 10px;
		border-radius: 50%;
		background: #4475f3;
	}

	.dot2 {
		width: 10px;
		height: 10px;
		border-radius: 50%;
		background: #fb8981;
	}

	.dotLabel {
		margin-right: 5px;
		color: #999;
		font-size: 13px;
	}

	.defenceSelectClass {
		color: #3a3ef4 !important;
		font-weight: bold;
	}
</style>